<template>
  <div v-loading="loading" v-empty="list" class="rc-cont" style="padding-right:10%;min-height:500px;">
    <flexbox v-for="(item, index) in list" :key="index"
             class="ha-cont"
             align="stretch"
             justify="flex-start">
      <div class="ha-week">{{ item.createTime|filterTimestampToFormatTime('MM-DD dddd') }}</div>
      <div class="ha-circle"/>
      <div class="ha-time">{{ item.createTime|filterTimestampToFormatTime('HH:mm') }}</div>
      <xr-avatar :name="item.realname" :id="item.createUserId" size="30"
                 :src="item.img" :disabled="false"
                 class="ha-img"/>
      <div class="ha-name">{{ item.realname }}</div>
      <div class="ha-content">
        <p v-for="(info, infoIndex) in item.content" :key="infoIndex">{{ info }}</p>
      </div>
      <div class="ha-line"/>
    </flexbox>
  </div>
</template>

<script setup>
import crmTypeModel from '/src/views/crm/model/crmTypeModel.js'
import {crmIndexFieldRecordAPI} from '/src/api/crm/common.js'
import {watch, ref, onMounted} from "vue"


defineOptions({
  name: 'RelativeHandle', // 相关操作  可能再很多地方展示 放到客户管理目录下
})

const props = defineProps({
  /** 模块ID */
  id: [String, Number],
  /** 联系人人下 新建商机 需要联系人里的客户信息  合同下需要客户和商机信息 */
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 没有值就是全部类型 有值就是当个类型 */
  crmType: {
    type: String,
    default: ''
  },
  /** 是公海 默认是客户 */
  isSeas: {
    type: Boolean,
    default: false
  }
})

const loading = ref(false)
const list = ref([])

// const rootTabs = inject('rootTabs')


watch(() => props.id, (val) => {
  list.value = []
  getDetail()
})

// watch(() => rootTabs.currentName, (val) => {
//   if (val === 'RelativeHandle') {
//     getDetail(false)
//   }
// })

onMounted(() => {
  getDetail()
})


function getDetail(load = true) {
  loading.value = load
  crmIndexFieldRecordAPI({
    types: crmTypeModel[props.crmType],
    actionId: props.id
  }).then(res => {
    loading.value = false
    list.value = res.data.data.map(item => {
      item.createTime = new Date(item.createTime).getTime()
      return item
    })
  }).catch(() => {
    loading.value = false
  })
}

</script>


<script type="text/javascript">
export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  // inject: ['rootTabs'],
  computed: {},
  watch: {},
  mounted() {
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '../../styles/relativecrm';

.ha-cont {
  font-size: 12px;
  position: relative;
  line-height: 20px;
  min-height: 40px;
  padding-top: 3px;

  .ha-week {
    margin: 0 17px 0 10px;
    flex-shrink: 0;
    color: #777;
    width: 80px;
  }

  .ha-time {
    padding: 0 10px 0 24px;
    flex-shrink: 0;
    color: #aaa;
  }

  .ha-circle {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    z-index: 2;
    border-radius: 9px;
    background-color: white;
    border: 5px solid #a5ecd7;
  }

  .ha-img {
    flex-shrink: 0;
    margin: -3px 10px 0 10px;
    display: block;
  }

  .ha-name {
    padding: 0 10px;
    flex-shrink: 0;
    color: #333;
  }

  .ha-content {
    padding: 0px 10px 10px 10px;
    flex: 1;
    color: #333;
  }

  .ha-line {
    position: absolute;
    z-index: 1;
    width: 1px;
    top: 3px;
    bottom: -3px;
    left: 115px;
    background-color: #e6e6e6;
  }
}
</style>
